<template>
	<view>
		<u-sticky>
			<view style="width: 730rpx;">
				<u-tabs :list="tabs" :is-scroll="false" active-color="#EEBC80" :current="current" @change="change"></u-tabs>
			</view>
		</u-sticky>
		
		<view class="list">
			<my-demand v-for="i in list[current].data" :key="i.id" :demand="i" @del="cancel(i.id)"></my-demand>
		</view>

		<view class="padding-tb">
			<u-loadmore :status="list[current].status" bg-color="#EFF1F4"></u-loadmore>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabs: [{
						name: '全部'
					},
					{
						name: '待接单'
					},
					{
						name: '沟通中'
					},
					{
						name: '已接单'
					},
					{
						name: '已完成'
					}
				],
				current: 0,
				list: [{
						type: 0,
						page: 1,
						data: [],
						status: 'loadmore'
					},
					{
						type: 1,
						page: 1,
						data: [],
						status: 'loadmore'
					},
					{
						type: 2,
						page: 1,
						data: [],
						status: 'loadmore'
					},
					{
						type: 3,
						page: 1,
						data: [],
						status: 'loadmore'
					},
					{
						type: 4,
						page: 1,
						data: [],
						status: 'loadmore'
					}
				]
			};
		},
		onLoad() {
			this.getList();
		},
		onReachBottom() {
			this.getList();
		},
		methods: {
			change(index) {
				this.current = index;
				this.getList(true);
			},
			getList(clear = false) {
				let target = this.list[this.current]
				if (clear) {
					target.status = 'loadmore',
					target.page = 1,
					target.data = []
				}
				if (target.status == 'nomore') return;
				
				target.status = 'loading'
				this.$u.get('/demand/list', {
					type: target.type,
					page: target.page
				}).then(res => {
					let { data, last_page } = res.data.result.demand
					target.data = [...target.data, ...data]
					if (target.page==last_page) target.status = 'nomore'
				})
			},
			cancel(id) {
				this.$u.get('/demand/cancel', {
					id: id
				}).then(res => {
					this.$msg(res.data.msg)
					if (res.data.code==0) {
						this.getList(true)
					}
				})
			}
		}
	}
</script>

<style lang="scss">

</style>
